<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Dropdown
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-dropdown selection text="课程">
        <sui-dropdown-menu>
          <sui-dropdown-item>Spring</sui-dropdown-item>
          <sui-dropdown-item>Mybatis</sui-dropdown-item>
          <sui-dropdown-divider/>
          <sui-dropdown-item>SpringMVC</sui-dropdown-item>
        </sui-dropdown-menu>
      </sui-dropdown>
      <sui-divider/>
      <sui-dropdown
        fluid
        multiple
        selection
        placeholder="Skills"
        :options="skills"
        v-model="current"
      >
      </sui-dropdown>
      <sui-divider/>
      <sui-dropdown
        button
        class="icon"
        floating
        icon="info"
        labeled
        search
        selection
        placeholder="Skills"
        :options="skills"
        v-model="current"
      >
      </sui-dropdown>
      <sui-divider/>
      <sui-dropdown
        button
        class="icon"
        floating
        icon="info"
        labeled
        selection
        :search-in-menu="searchInMenu"
        placeholder="Skills"
        pointing="bottom left"
        :options="skills"
        v-model="current"
      >
      </sui-dropdown>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Dropdown',
  data () {
    return {
      current: null,
      skills: [
        { key: 'angular', text: 'Angular', value: 'angular' },
        { key: 'css', text: 'CSS', value: 'css' },
        { key: 'design', text: 'Graphic Design', value: 'design' },
        { key: 'ember', text: 'Ember', value: 'ember' }
      ],
      searchInMenu: {
        icon: 'search',
        iconPosition: 'left'
      }
    }
  }
}
</script>

<style scoped>

</style>
